<!--
 * @Author: your name
 * @Date: 2020-11-27 18:46:06
 * @LastEditTime: 2020-12-02 15:54:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \wilde-survival-plant\src\views\message\list.vue
-->
<template>
  <div id="message-list">
    <div class="plant_list_form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="搜索问题：">
          <el-input v-model="formInline.question" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分类一：">
          <el-select v-model="formInline.label_top" clearable placeholder="请选择" @change="getSecondLabel">
            <el-option
              v-for="item in label_top"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类二：">
          <el-select v-model="formInline.label_second" :clearable="true" placeholder="请选择">
            <el-option
              v-for="item in label_second"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button v-permission="['管理者']" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="plant_list_table">
      <div class="items">
        <div v-for="(item, index) in tableData" :key="item.id" class="item">
          <div class="header clearfix">
            <div class="left-side pull-left">
              <span class="number">{{ item.id }}</span>
              <span class="label">{{ item.label_top_name }}</span>
              <span class="label">{{ item.label_second_name }}</span>
            </div>
            <div class="right-side pull-right">{{ item.date }}</div>
          </div>
          <div class="content">{{ item.question }}</div>
          <div v-show="item.answer" class="reply">
            <img src="../../assets/message.png" alt="">
            {{ item.answer }}
          </div>
          <div class="footer cleatfix">
            <el-popconfirm
              title="是否确定删除此信息？"
              confirm-button-text="确 认"
              cancel-button-text="取 消"
              @onConfirm="deletefn(item.id)"
            >
              <el-button
                slot="reference"
                v-permission="['管理者']"
                style="color: #FF4D4F;margin-left: 8px;"
                class="pull-right delete"
                icon="el-icon-delete"
                type="text"
              >
                删除
              </el-button>
            </el-popconfirm>
            <el-button
              v-show="!item.answer"
              v-permission="['管理者']"
              class="pull-right delete"
              icon="el-icon-s-comment"
              type="text"
              @click="answerfn(item.id)"
            >
              回复
            </el-button>
            <el-button
              class="pull-right look"
              icon="el-icon-zoom-in"
              type="text"
              @click="detail(item.id)"
            >
              查看
            </el-button>
          </div>
        </div>
      </div>
      <div v-show="tableData.length < 1" class="noData">暂无留言</div>
      <el-pagination
        :current-page="currentPage"
        :page-size="3"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { firstLabel, secondLabel, msgBroad, deleteMsgBroad } from '@/api/message'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      label_top: [],
      label_second: [],
      formInline: {
        question: '',
        label_top: '',
        label_second: ''
      }
    }
  },
  mounted() {
    this.getList()
    this.getFirstLabel()
  },
  methods: {
    add() {
      this.$router.push('/message/create')
    },
    answerfn(id) {
      this.$router.push(`/message/reply/${id}`)
    },
    detail(id) {
      this.$router.push(`/message/detail/${id}`)
    },
    handleSizeChange(val) {
      this.currentPage = val
      this.getList()
    },
    async deletefn(id) {
      const res = await deleteMsgBroad(id)
      const code = Number(res.code)
      if (code === 200) {
        this.getList()
      }
    },
    async getList() {
      const params = {
        page_num: this.currentPage,
        page_size: 3,
        conditions: [
          {
            key: 'label_top',
            operator: 'like',
            value: this.formInline.label_top
          },
          {
            key: 'label_second',
            operator: 'like',
            value: this.formInline.label_second
          },
          {
            key: 'question',
            operator: 'like',
            value: this.formInline.question
          }
        ],
        order_info: {
          key: 'create_time',
          order: 'desc'
        }
      }
      const res = await msgBroad(params)
      const code = Number(res.code)
      if (code === 200) {
        this.tableData = res.data.map(item => {
          item.date = parseTime(item.create_time)
          return item
        })
        this.total = res.paging.total
      }
    },
    async getFirstLabel() {
      const res = await firstLabel({ value: 9 })
      const code = Number(res.code)
      if (code === 200) {
        this.label_top = res.data
      }
    },
    async getSecondLabel() {
      this.formInline.label_second = ''
      const res = await secondLabel({ value: this.formInline.label_top })
      const code = Number(res.code)
      if (code === 200) {
        this.label_second = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#message-list{
  padding-right: 50px;
  position: relative;
  min-height: calc(100vh - 150px);
  padding-bottom: 100px;
  .el-pagination{
    margin-top: 20px;
  }
  .noData{
    height: 800px;
    line-height: 800px;
    text-align: center;
    color: #999;
  }
  .items{
    .header{
      border-top: 1px solid #e6e6e6;
      padding-top: 35px;
      .number{
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        color: rgba(0,0,0,0.85);
        line-height: 25px;
      }
      .label{
        margin-left: 16px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #fc7a01;
        line-height: 14px;
      }
      .right-side{
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: rgba(0,0,0,0.45);
        line-height: 22px;
      }
    }
    .content{
      margin-top: 5px;
      padding-left: 50px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: rgba(0,0,0,0.85);
      line-height: 25px;
      height: 75px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
    }
    .reply{
      position: relative;
      background: #f8fcff;
      border-radius: 2px;
      padding: 10px;
      padding-left: 50px;
      margin-left: 50px;
      height: 75px;
      color: rgba(0,0,0,0.65);
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      img{
        position: absolute;
        left: 10px;
        top: 5px;
        width: 25px;
        height: 25px;
      }
    }
    .footer{
      margin-bottom: 70px;
      .pull-right{
        margin: 0 20px;
      }
    }
  }
  .el-pagination{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: - 300px;
    width: 600px;
  }
}
</style>
